<template>
	<view class="container">
		<view class="card" :style="{ backgroundImage: 'url(' + yebg + ')' }">
			<view class="title">
				可用余额（元）
			</view>
			<view class="amount">
				{{balance}}
			</view>
			<view class="btn" @click="handleClickItem">
				去提现
			</view>
		</view>
		<view class="card" :style="{ backgroundImage: 'url(' + zhbbg + ')' }">
			<view class="title">
				可用智汇币（元）
			</view>
			<view class="amount">
				{{zhcoin}}
			</view>
			<view class="u-flex">
			<view class="btn u-m-r-20" @click="handleClickItem2">
				明细
			</view>
			<view class="btn" @click="pay">
				去充值
			</view>
			</view>
		</view>
		<view class="line"></view>
		<view class="list">
			<view class="item">
				<view class="left">
					<image :src="bzj"></image>
				</view>
				<view @click="handleClickItem4" class="center">保证金</view>
				<view class="right">
					<view style="display: flex;">
						<view class="text" @click="pay">{{bondTitle}} </view>
						<u-icon name="arrow-right" size="32"></u-icon>
					</view>
				</view>
			</view>
			<view class="item">
				<view class="left">
					<image :src="txzh"></image>
				</view>
				<view class="center" @click="handleClickItem3">提现账户</view>
				<view class="right">
					<view style="display: flex;">
						<u-icon name="arrow-right" size="32"></u-icon>
					</view>
				</view>
			</view>
			<view class="item">
				<view class="left">
					<image :src="txmm"></image>
				</view>
				<view class="center" @click="handleClickPW">提现密码</view>
				<view class="right">
					<view style="display: flex;">
						<u-icon name="arrow-right" size="32"></u-icon>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bzj: this.$mAssetsPath.bzj,
				txmm: this.$mAssetsPath.txmm,
				txzh: this.$mAssetsPath.txzh,
				yebg: this.$mAssetsPath.yebg,
				zhbbg: this.$mAssetsPath.zhbbg,
				zhcoin: 0,
				balance: 0,
				bond: 0,
				bondTitle: '未缴纳',
				form:{}


			}
		},
		onLoad() {
			this.currentAccountInfo();
		},
		methods: {
			pay(){
				uni.navigateTo({
					url:"/pages/payment/other"
				})
			},
			async currentAccountInfo() {
				let data = await this.$apis.currentAccountInfo();
				if (data.code === 200) {
					console.log(data.data)
					if (data.data.balance) {
						this.balance = data.data.balance
					}
					if (data.data.zhcoin) {
						this.zhcoin = data.data.zhcoin
					}
					if (data.data.bondStatus) {
						this.bondTitle = '已缴纳'
					}
				}
			},
			handleClickPW() {
				this.$mRouter.push({
					route: this.$mRoutesConfig.withdrawalPW
				});
			},
			handleClickItem() {
				uni.navigateTo({
					url:'../withdrawal/withdrawal?balance='+this.balance,
					
				})
			},
			handleClickItem3() {
				this.$mRouter.push({
					route: this.$mRoutesConfig.bankCards
				});
			},
			handleClickItem2() {
				this.$mRouter.push({
					route: this.$mRoutesConfig.record
				});
			},
			handleClickItem4(){
				uni.navigateTo({
					url:"../../authorization/bond"
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.container {
		.line {
			background-color: #f4f4f4;
			width: 100%;
			height: 20upx;
		}

		.list {
			padding: 0 30upx;
			margin-bottom: 130upx;

			.item {
				height: 103upx;
				width: 100%;
				border-bottom: #f4f4f4 solid 1upx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.right {
					.text {
						color: #FF9E22;
						font-size: 28upx;
						margin-right: 14upx;
						line-height: 28upx;
					}
				}

				.center {
					color: #0E1E36;
					font-size: 32upx;
					padding: 0 20upx;
					flex: 1;
				}

				.left {
					height: 38upx;

					image {
						width: 38upx;
						height: 38upx;
					}
				}
			}
		}

		.card {
			width: 100%;
			height: 440upx;
			background-size: auto 100%;
			padding: 100upx 75upx;

			.btn {
				font-size: 30upx;
				line-height: 58upx;
				width: 150upx;
				height: 58upx;
				border: #fff solid 2upx;
				color: #fff;
				text-align: center;
				margin-top: 50upx;
				border-radius: 6upx;
			}

			.amount {
				margin-top: 36upx;
				color: #fff;
				font-size: 70upx;
				line-height: 70upx;
				font-weight: bold;
			}

			.title {
				color: #fff;
				font-size: 24upx;
				line-height: 24upx;
			}
		}

		.line {}
	}
</style>
